<!DOCTYPE html><html lang="zh"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能养生应用界面</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", "Source Han Sans CN", sans-serif;
        }

        body {
            background-color: #F5F2EB;
            display: flex;
            justify-content: center;
            padding: 20px;
        }

        .pages-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto auto;
            gap: 20px;
            max-width: 1120px;
            margin: 0 auto;
        }

        .page {
            width: 360px;
            height: 640px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        .custom-bg {
            background-color: #F5F2EB;
            background-position: center;
            background-repeat: no-repeat;
        }

        .row-2 {
            grid-column: span 3;
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        /* 通用组件样式 */
        .input-field {
            border: 1px solid #E5E5E5;
            border-radius: 8px;
            height: 48px;
            padding: 0 15px;
            color: #999;
            font-size: 14px;
            width: 300px;
            background: white;
        }

        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            padding: 15px;
        }

        .btn-login {
            width: 300px;
            height: 52px;
            background: #E6F7E9;
            border-radius: 12px;
            color: #666;
            font-weight: 500;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .title {
            font-weight: 500;
            color: #333;
        }

        .bottom-nav {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50px;
            background: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .nav-icon {
            font-size: 24px;
            color: #999;
        }

        .nav-item.active .nav-icon {
            color: #4CAF50 !important;
        }

        .nav-item span {
            font-size: 10px;
            color: #999;
            margin-top: 2px;
        }

        .nav-item.active span {
            color: #4CAF50 !important;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .grid-item {
            background: white;
            border-radius: 8px;
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .post-card {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        .post-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .post-content {
            margin-left: 46px;
            color: #333;
            font-size: 14px;
            line-height: 1.5;
        }

        .post-footer {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="pages-container">
    <!-- 登录页 -->
    <div class="page">
        <div style="height: 100%; position: relative;">
            <!-- 顶部返回按钮 -->
            <div style="position: absolute; top: 20px; left: 15px;">
                <span class="iconify" data-icon="ion:arrow-back" style="font-size: 24px;"></span>
            </div>

            <!-- 标题 -->
            <h2 style="text-align: center; font-size: 22px; font-weight: 600;
                    color: #333; position: absolute; top: 100px; width: 100%;">
                密码登录
            </h2>

            <!-- 输入框区域 -->
            <div style="position: absolute; top: 160px; left: 30px;">
                <input type="text" class="input-field" placeholder="+86 请输入手机号">

                <div style="position: relative; margin-top: 15px;">
                    <input type="password" class="input-field" placeholder="请输入密码">
                    <span class="iconify" data-icon="mdi:eye" style="position: absolute;
                            right: 15px; top: 14px; font-size: 20px; color: #333;"></span>
                </div>

                <div style="display: flex; justify-content: space-between; width: 300px;
                        margin-top: 10px; font-size: 12px;">
                    <span style="color: #999;">忘记密码</span>
                    <div style="display: flex; align-items: center; gap: 3px; color: #4CAF50;">
                        <span>新用户注册</span>
                        <span class="iconify" data-icon="mingcute:right-line"></span>
                    </div>
                </div>

                <button class="btn-login" style="margin-top: 30px;">登录</button>
            </div>

            <!-- 分隔线 -->
            <div style="position: absolute; bottom: 80px; left: 0;
                    width: 100%; text-align: center; display: flex;
                    align-items: center; justify-content: center; gap: 10px;
                    color: #E5E5E5; font-size: 12px;">
                <span style="width: 35%; height: 1px; background: #E5E5E5;"></span>
                <span>验证码登录</span>
                <span style="width: 35%; height: 1px; background: #E5E5E5;"></span>
            </div>
        </div>
    </div>

    <!-- 主页 -->
    <div class="page custom-bg">
        <div style="height: 100%;">
            <!-- 顶部导航 -->
            <div style="display: flex; justify-content: space-between; padding: 15px;">
                <div style="background: #D32F2F; width: 24px; height: 24px;
                        border-radius: 4px;"></div>
                <span class="iconify" data-icon="ion:search" style="font-size: 24px;"></span>
            </div>

            <!-- Banner -->
            <div style="background: linear-gradient(135deg, #FFD700 0%, #F5DEB3 100%);
                    height: 180px; width: 100%; margin-top: 10px;
                    display: flex; flex-direction: column; align-items: center;
                    justify-content: center; position: relative;
                    background-color: #90CAF9;
                    background-size: cover;">
                <div style="background: #4CAF50; width: 6px; height: 6px;
                        border-radius: 50%; position: absolute; bottom: 10px;"></div>
            </div>

            <!-- 功能图标区 -->
            <div style="display: flex; justify-content: center;
                    gap: 40px; margin-top: 20px;">
                <div style="text-align: center;">
                    <div style="background: #FFC107; width: 40px; height: 40px;
                            margin: 0 auto 8px; border-radius: 8px;"></div>
                    <span style="font-size: 12px; color: #333;">中药</span>
                </div>
                <div style="text-align: center;">
                    <div style="background: #FFC107; width: 40px; height: 40px;
                            margin: 0 auto 8px; border-radius: 8px;"></div>
                    <span style="font-size: 12px; color: #333;">练习</span>
                </div>
                <div style="text-align: center;">
                    <div style="background: #FFC107; width: 40px; height: 40px;
                            margin: 0 auto 8px; border-radius: 8px;"></div>
                    <span style="font-size: 12px; color: #333;">笔记</span>
                </div>
            </div>

            <!-- 养生建议模块 -->
            <div class="card" style="width: 330px; margin: 15px auto 0;">
                <div class="title" style="font-size: 16px; margin-bottom: 10px;">养生建议</div>
                <p style="color: #666; font-size: 14px; line-height: 1.5;">
                    减少内耗：遇事少纠结，多行动。给自己确定目标并分解任务，
                    把思考变成行动力...提升心理健康。
                </p>
            </div>

            <!-- 错题复盘模块 -->
            <div class="card" style="width: 330px; margin: 15px auto 0; padding-bottom: 20px;">
                <div class="title" style="font-size: 16px; margin-bottom: 10px;">错题复盘</div>
                <p style="color: #666; font-size: 14px; line-height: 1.5;">
                    题目：用咸味药治疗瘰疬、痰核等结块性疾病的理论依据是<br>
                    选项：(A)利水渗湿 (B)清热利湿 (C)明目祛风
                </p>
            </div>

            <!-- 底部导航栏 -->
            <div class="bottom-nav">
                <div class="nav-item active">
                    <span class="iconify nav-icon" data-icon="ion:book"></span>
                    <span>学习</span>
                </div>
                <div class="nav-item">
                    <span class="iconify nav-icon" data-icon="ant-design:compass-outlined"></span>
                    <span>探索</span>
                </div>
                <div class="nav-item">
                    <span class="iconify nav-icon" data-icon="ic:outline-add-circle" style="color: #4CAF50; font-size: 30px;"></span>
                </div>
                <div class="nav-item">
                    <span class="iconify nav-icon" data-icon="material-symbols:chat-outline"></span>
                    <span>交流</span>
                </div>
                <div class="nav-item">
                    <span class="iconify nav-icon" data-icon="iconamoon:profile-circle"></span>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 我的页 -->
    <div class="page custom-bg" style="position: relative;">
        <div style="background: linear-gradient(to bottom, #F5F2EB 0%, white 50%, white 100%);
            height: 100vh; padding: 10px 0; box-sizing: border-box;">
            <!-- 顶部信息 -->
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 15px 0;">
                <div style="display: flex; align-items: center;">
                    <!-- 用颜色块代替头像 -->
                    <div style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; background-color: #8B4513;"></div>
                    <div>
                        <div style="font-size: 16px; font-weight: 500;">田唔</div>
                        <div style="font-size: 12px; color: #999;">uid 000000002</div>
                    </div>
                </div>
                <button style="background: none; border: 1px solid #E5E5E5; border-radius: 5px; padding: 5px 10px; font-size: 12px; cursor: pointer;">
                    <span class="iconify" data-icon="ic:baseline-settings"></span>
                </button>
            </div>

            <!-- 粉丝关注获赞信息 -->
            <div style="display: flex; justify-content: space-around; width: 200px; margin: 10px auto;">
                <div class="stats-item" style="text-align: center;">
                    <div style="font-size: 14px; font-weight: 500;">2</div>
                    <div style="font-size: 12px; color: #999;">粉丝</div>
                </div>
                <div class="stats-item" style="text-align: center;">
                    <div style="font-size: 14px; font-weight: 500;">3</div>
                    <div style="font-size: 12px; color: #999;">关注</div>
                </div>
                <div class="stats-item" style="text-align: center;">
                    <div style="font-size: 14px; font-weight: 500;">8</div>
                    <div style="font-size: 12px; color: #999;">获赞</div>
                </div>
            </div>

            <!-- 发布收藏标签 -->
            <div style="display: flex; justify-content: center; margin: 10px 0;">
                <div class="tab-item active" style="margin-right: 20px; font-size: 14px; font-weight: 500; color: #8B4513; padding-bottom: 5px; border-bottom: 2px solid #8B4513;">发布</div>
                <div class="tab-item" style="font-size: 14px; font-weight: 500; color: #999; padding-bottom: 5px;">收藏</div>
            </div>

            <!-- 动态列表 -->
            <div class="dynamic-list" style="margin: 0 15px; overflow-y: auto; height: calc(100% - 220px);">
                <!-- 动态项1 -->
                <div class="dynamic-item" style="border-bottom: 1px solid #E5E5E5; padding: 10px 0;">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <!-- 用颜色块代替头像 -->
                        <div style="width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; background-color: #8B4513;"></div>
                        <div>
                            <div style="font-size: 14px; font-weight: 500;">田唔</div>
                            <div style="font-size: 12px; color: #999;">2025-03-19</div>
                        </div>
                    </div>
                    <div style="margin-bottom: 5px; padding-left: 40px;">
                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 5px;">静夜思</div>
                        <div style="font-size: 14px; line-height: 1.5; color: #333;">床前明月光<br>疑是地上霜<br>举头望明月...</div>
                    </div>
                    <div style="display: flex; align-items: center; color: #999; font-size: 12px; padding-left: 40px;">
                    <span style="margin-right: 15px; display: flex; align-items: center;">
                        <span class="iconify" data-icon="mdi:comment-outline" style="margin-right: 3px;"></span> 2
                    </span>
                        <span style="display: flex; align-items: center;">
                        <span class="iconify" data-icon="mdi:heart-outline" style="margin-right: 3px;"></span> 1
                    </span>
                    </div>
                </div>

                <!-- 动态项2 -->
                <div class="dynamic-item" style="border-bottom: 1px solid #E5E5E5; padding: 10px 0;">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <!-- 用颜色块代替头像 -->
                        <div style="width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; background-color: #8B4513;"></div>
                        <div>
                            <div style="font-size: 14px; font-weight: 500;">田唔</div>
                            <div style="font-size: 12px; color: #999;">2025-03-19</div>
                        </div>
                    </div>
                    <div style="margin-bottom: 5px; padding-left: 40px;">
                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 5px;">中药太苦</div>
                        <div style="font-size: 14px; line-height: 1.5; color: #333;">苦啊</div>
                    </div>
                    <div style="display: flex; align-items: center; color: #999; font-size: 12px; padding-left: 40px;">
                    <span style="margin-right: 15px; display: flex; align-items: center;">
                        <span class="iconify" data-icon="mdi:comment-outline" style="margin-right: 3px;"></span> 2
                    </span>
                        <span style="display: flex; align-items: center;">
                        <span class="iconify" data-icon="mdi:heart-outline" style="margin-right: 3px;"></span> 2
                    </span>
                    </div>
                </div>

                <!-- 动态项3 -->
                <div class="dynamic-item" style="padding: 10px 0;">
                    <div style="display: flex; align-items: center; margin-bottom: 5px;">
                        <!-- 用颜色块代替头像 -->
                        <div style="width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; background-color: #8B4513;"></div>
                        <div>
                            <div style="font-size: 14px; font-weight: 500;">田唔</div>
                            <div style="font-size: 12px; color: #999;">2025-03-16</div>
                        </div>
                    </div>
                    <div style="margin-bottom: 5px; padding-left: 40px;">
                        <div style="font-size: 14px; font-weight: 500; margin-bottom: 5px;">雷使徒的盾</div>
                        <div style="font-size: 14px; line-height: 1.5; color: #333;">感觉变薄了，以前用水难破的很</div>
                    </div>
                    <div style="display: flex; align-items: center; color: #999; font-size: 12px; padding-left: 40px;">
                    <span style="margin-right: 15px; display: flex; align-items: center;">
                        <span class="iconify" data-icon="mdi:comment-outline" style="margin-right: 3px;"></span> 0
                    </span>
                        <span style="display: flex; align-items: center;">
                        <span class="iconify" data-icon="mdi:heart-outline" style="margin-right: 3px;"></span> 0
                    </span>
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="bottom-nav" style="position: absolute; bottom: 0; left: 0; width: 100%; display: flex; justify-content: space-around; padding: 10px 0; background: white; border-top: 1px solid #E5E5E5; box-sizing: border-box;">
                <div class="nav-item" style="display: flex; flex-direction: column; align-items: center; color: #999; font-size: 12px;">
                    <span class="iconify nav-icon" data-icon="ion:home" style="font-size: 20px; margin-bottom: 3px;"></span>
                    <span>首页</span>
                </div>
                <div class="nav-item" style="display: flex; flex-direction: column; align-items: center; color: #999; font-size: 12px;">
                    <span class="iconify nav-icon" data-icon="ion:search" style="font-size: 20px; margin-bottom: 3px;"></span>
                    <span>探索</span>
                </div>
                <div class="nav-item" style="display: flex; flex-direction: column; align-items: center; margin-top: -15px;">
                    <span class="iconify nav-icon" data-icon="ic:outline-add-circle" style="color: #4CAF50; font-size: 36px; background: white; border-radius: 50%;"></span>
                </div>
                <div class="nav-item" style="display: flex; flex-direction: column; align-items: center; color: #999; font-size: 12px;">
                    <span class="iconify nav-icon" data-icon="material-symbols:chat-outline" style="font-size: 20px; margin-bottom: 3px;"></span>
                    <span>交流</span>
                </div>
                <div class="nav-item active" style="display: flex; flex-direction: column; align-items: center; color: #8B4513; font-size: 12px;">
                    <span class="iconify nav-icon" data-icon="iconamoon:profile-circle" style="font-size: 20px; margin-bottom: 3px;"></span>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 行2容器 -->
    <div class="row-2">
        <!--ai问答页-->
        <div class="page custom-bg" style="background: white; display: flex; flex-direction: column; margin: 0; padding: 0;">
            <!-- 顶部导航 -->
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #8ce090; color: white; height: 50px; box-sizing: border-box;">
                <span class="iconify" data-icon="ion:arrow-back" style="font-size: 24px; color: white;"></span>
                <h2 style="font-size: 18px; font-weight: 600; margin: 0; flex-grow: 1; text-align: center;">草本智库</h2>
            </div>

            <!-- 聊天内容区 -->
            <div style="flex: 1; overflow-y: auto; padding: 10px;">
                <!-- 用户提问 -->
                <div style="display: flex; margin-bottom: 15px; justify-content: flex-end;">
                    <div style="background-color: #E8F5E9; padding: 10px 15px; border-radius: 18px; max-width: 70%;">
                        <div style="font-size: 16px; font-weight: 500; color: #333; margin-bottom: 5px;">葛根</div>
                        <div style="color: #666; line-height: 1.5;">
                            请问葛根有什么功效和作用？适合在什么情况下服用？有没有什么注意事项？
                        </div>
                    </div>
                    <div style="width: 30px; height: 30px; border-radius: 50%; background-color: #FFC107; display: flex; align-items: center; justify-content: center; margin-left: 10px; flex-shrink: 0;">
                        <span style="color: white; font-size: 14px;">U</span>
                    </div>
                </div>

                <!-- AI 回答 -->
                <div style="display: flex; margin-bottom: 15px;">
                    <div style="width: 30px; height: 30px; border-radius: 50%; background-color: #00BCD4; display: flex; align-items: center; justify-content: center; margin-right: 10px; flex-shrink: 0;">
                        <span style="color: white; font-size: 14px;">AI</span>
                    </div>
                    <div style="background-color: #f0f0f0; padding: 10px 15px; border-radius: 18px; max-width: 70%;">
                        <div style="color: #666; line-height: 1.5;">
                            葛根是一种常见的中药药材，通常用于清热解表、透疹。特别适合在天气湿热时服用。它由葛藤的根茎制成，味道甘甜，性质偏凉。如果最近出现感冒或者感觉喉咙咽喉不适，适量喝点葛根汤会有帮助哦。不过要注意不要过量饮用，脾胃虚寒的人群最好在医生指导下再服用。
                        </div>
                    </div>
                </div>

                <!-- 可以继续添加更多消息 -->
            </div>

            <!-- 输入框区域 -->
            <div style="position: relative; padding: 10px; box-sizing: border-box; border-top: 1px solid #eee;">
                <input type="text" placeholder="请输入你的指令" style="width: 100%; padding: 12px 40px 12px 15px; border: 1px solid #ddd; border-radius: 20px; box-sizing: border-box; outline: none;">
                <span class="iconify" data-icon="ion:send" style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #4CAF50; cursor: pointer;"></span>
            </div>
        </div>


        <!-- 省份页 -->
        <div class="page custom-bg" style="background-image: linear-gradient(to bottom, rgba(245,242,235,0) 0%, rgba(245,242,235,0) 92%, rgba(222,204,204,0.2) 92%, rgba(222,204,204,0.2) 100%);position: relative;">
            <div style="padding: 10px;">
                <!-- 顶部状态 -->
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: #999; font-size: 12px;">04:18</span>
                    <div>
                        <span class="iconify" data-icon="material-symbols:signal-cellular-4-bar" style="font-size: 16px; margin-right: 10px;"></span>
                        <span class="iconify" data-icon="material-symbols:battery-charging-90" style="font-size: 16px;"></span>
                    </div>
                </div>

                <!-- 省份网格区 -->
                <div class="grid-container" style="width: 330px; margin: 30px auto 0;">
                    <!-- 第一行 -->
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">北京</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">天津</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">河北</span>
                    </div>

                    <!-- 第二行 -->
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">山西</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">内蒙古</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">辽宁</span>
                    </div>

                    <!-- 第三行 -->
                    <div class="grid-item">
                        <span class="iconify" style="color: #90CAF9; font-size: 24px;" data-icon="wi:cloudy"></span>
                        <span style="margin-top: 10px; font-weight: 500;">吉林</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">黑龙江</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">上海</span>
                    </div>

                    <!-- 第四行 -->
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">江苏</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">浙江</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">安徽</span>
                    </div>

                    <!-- 第五行 -->
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">福建</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">江西</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">山东</span>
                    </div>

                    <!-- 第六行 -->
                    <div class="grid-item">
                        <span class="iconify" style="color: #90CAF9; font-size: 24px;" data-icon="wi:cloudy"></span>
                        <span style="margin-top: 10px; font-weight: 500;">河南</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #90CAF9; font-size: 24px;" data-icon="wi:cloudy"></span>
                        <span style="margin-top: 10px; font-weight: 500;">湖北</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">湖南</span>
                    </div>

                    <!-- 第七行 -->
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">广东</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">广西</span>
                    </div>
                    <div class="grid-item">
                        <span class="iconify" style="color: #FFC107; font-size: 24px;" data-icon="wi:day-sunny"></span>
                        <span style="margin-top: 10px; font-weight: 500;">海南</span>
                    </div>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="bottom-nav">
                <div class="nav-item">
                    <span class="iconify nav-icon" data-icon="ion:book"></span>
                    <span>学习</span>
                </div>
                <div class="nav-item active">
                    <span class="iconify nav-icon" data-icon="ant-design:compass-outlined"></span>
                    <span>探索</span>
                </div>
                <div class="nav-item">
                    <span class="iconify nav-icon" data-icon="ic:outline-add-circle" style="color: #4CAF50; font-size: 30px;"></span>
                </div>
                <div class="nav-item">
                    <span class="iconify nav-icon" data-icon="material-symbols:chat-outline"></span>
                    <span>交流</span>
                </div>
                <div class="nav-item">
                    <span class="iconify nav-icon" data-icon="iconamoon:profile-circle"></span>
                    <span>我的</span>
                </div>
            </div>
        </div>

        <!-- 论坛页 -->
        <div class="page">
            <div style="padding: 0;">
                <!-- 顶部 -->
                <div style="padding: 10px 15px 0;">
                    <span style="color: #999; font-size: 12px;">09:30</span>
                    <div style="display: flex; justify-content: space-between;
                            align-items: center; margin-top: 10px;">
                        <div style="display: flex; align-items: center;">
                                <span style="font-size: 16px; font-weight: 500; margin-right: 5px;">
                                    通知
                                </span>
                            <span class="iconify" data-icon="uil:angle-down" style="font-size: 16px;"></span>
                        </div>
                        <span class="iconify" data-icon="ion:search" style="font-size: 24px;"></span>
                    </div>
                </div>

                <!-- 帖子列表 -->
                <div style="margin-top: 20px; padding: 0 15px; overflow-y: auto; height: 510px;">
                    <!-- 帖子1 -->
                    <div class="post-card">
                        <div class="post-header">
                            <div style="width: 36px; height: 36px;
                                    background: #E5E5E5; border-radius: 50%;"></div>
                            <div style="margin-left: 10px;">
                                <div style="font-weight: 500; font-size: 14px;">Furitala</div>
                                <div style="color: #999; font-size: 12px;">2025-03-31</div>
                            </div>
                        </div>
                        <div class="post-content">
                            你好
                        </div>
                        <div class="post-footer">
                            <div style="display: flex; align-items: center;">
                                <span class="iconify" data-icon="mdi:comment-outline" style="color: #999; font-size: 16px;"></span>
                                <span style="color: #999; font-size: 12px; margin-left: 5px;">0</span>
                            </div>
                            <div style="display: flex; align-items: center;">
                                <span class="iconify" data-icon="heroicons-outline:thumb-up" style="color: #999; font-size: 16px;"></span>
                                <span style="color: #999; font-size: 12px; margin-left: 5px;">0</span>
                            </div>
                        </div>
                    </div>

                    <!-- 帖子2 -->
                    <div class="post-card">
                        <div class="post-header">
                            <div style="width: 36px; height: 36px;
                                    background: #FFE0B2; border-radius: 50%;"></div>
                            <div style="margin-left: 10px;">
                                <div style="font-weight: 500; font-size: 14px;">田唔</div>
                                <div style="color: #999; font-size: 12px;">2025-03-16</div>
                            </div>
                        </div>
                        <div class="post-content">
                            雷使徒的盾感觉变薄了，半场破盾感觉轻松了不少
                        </div>
                        <div class="post-footer">
                            <div style="display: flex; align-items: center;">
                                <span class="iconify" data-icon="mdi:comment-outline" style="color: #999; font-size: 16px;"></span>
                                <span style="color: #999; font-size: 12px; margin-left: 5px;">4</span>
                            </div>
                            <div style="display: flex; align-items: center;">
                                <span class="iconify" data-icon="heroicons-outline:thumb-up" style="color: #999; font-size: 16px;"></span>
                                <span style="color: #999; font-size: 12px; margin-left: 5px;">1</span>
                            </div>
                        </div>
                    </div>

                    <!-- 帖子3 -->
                    <div class="post-card">
                        <div class="post-header">
                            <div style="width: 36px; height: 36px;
                                    background: #C8E6C9; border-radius: 50%;"></div>
                            <div style="margin-left: 10px;">
                                <div style="font-weight: 500; font-size: 14px;">抓不住的鹿</div>
                                <div style="color: #999; font-size: 12px;">2025-03-31</div>
                            </div>
                        </div>
                        <div class="post-content">
                            大家好
                        </div>
                        <div class="post-footer">
                            <div style="display: flex; align-items: center;">
                                <span class="iconify" data-icon="mdi:comment-outline" style="color: #999; font-size: 16px;"></span>
                                <span style="color: #999; font-size: 12px; margin-left: 5px;">2</span>
                            </div>
                            <div style="display: flex; align-items: center;">
                                <span class="iconify" data-icon="heroicons-outline:thumb-up" style="color: #999; font-size: 16px;"></span>
                                <span style="color: #999; font-size: 12px; margin-left: 5px;">0</span>
                            </div>
                        </div>
                    </div>

                    <!-- 帖子4 -->
                    <div class="post-card">
                        <div class="post-header">
                            <div style="width: 36px; height: 36px;
                                    background: #FFE0B2; border-radius: 50%;"></div>
                            <div style="margin-left: 10px;">
                                <div style="font-weight: 500; font-size: 14px;">田唔</div>
                                <div style="color: #999; font-size: 12px;">2025-03-19</div>
                            </div>
                        </div>
                        <div class="post-content">
                            中药太苦 苦啊
                        </div>
                        <div class="post-footer">
                            <div style="display: flex; align-items: center;">
                                <span class="iconify" data-icon="mdi:comment-outline" style="color: #999; font-size: 16px;"></span>
                                <span style="color: #999; font-size: 12px; margin-left: 5px;">2</span>
                            </div>
                            <div style="display: flex; align-items: center;">
                                <span class="iconify" data-icon="heroicons-outline:thumb-up" style="color: #999; font-size: 16px;"></span>
                                <span style="color: #999; font-size: 12px; margin-left: 5px;">2</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 底部导航栏 -->
                <div class="bottom-nav">
                    <div class="nav-item">
                        <span class="iconify nav-icon" data-icon="ion:book"></span>
                        <span>学习</span>
                    </div>
                    <div class="nav-item">
                        <span class="iconify nav-icon" data-icon="ant-design:compass-outlined"></span>
                        <span>探索</span>
                    </div>
                    <div class="nav-item">
                        <span class="iconify nav-icon" data-icon="ic:outline-add-circle" style="color: #4CAF50; font-size: 30px;"></span>
                    </div>
                    <div class="nav-item active">
                        <span class="iconify nav-icon" data-icon="material-symbols:chat-outline"></span>
                        <span>交流</span>
                    </div>
                    <div class="nav-item">
                        <span class="iconify nav-icon" data-icon="iconamoon:profile-circle"></span>
                        <span>我的</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>